import './bigVideo.less'
import VideoPlayer from '../videoPlayer/videoPlayer'
import { CloseOutlined, AimOutlined, LineOutlined, BorderOutlined } from '@ant-design/icons'
import { post } from '../../axios/index'
import { useState, useRef } from 'react'
import LeftList from './leftList'
import config from '../../axios/config'

function BigVideo(props) {
  function getUrl() {
    return `${config.wsURL}${props.facility.id}/?url=rtsp://${props.facility.facilityHost}:9554/live&channel=${props.facility.hot ? 1 : 0}&subtype=0`
  }

  //点：dot；线：line；框：circle
  const [type, setType] = useState(null)
  let line = null//记录点击的点位
  function setTypeFn (val, event) {
    if(type !== val) {
      setType(val)
      line = null
    }else{
      setType(null)
    }
    event.preventDefault()
  }

  const [refech, setRefech] = useState(0)
  //保存点位
  function save(param) {
    post('/ck_electrical/api/addFacilityThermometry', param).then(res => {
      if(res.data.status === '200') {
        videoRef.current.height = videoRef.current.height//清空画布
        line = null
        setRefech((val) => val + 1)
      }
    })
  }

  const partRef = useRef(null)
  const videoRef = useRef(null)

  //点击时
  const dotFn = (event) => {
    var e = event || window.event;
    if(type === 'dot'){
      const cxt = videoRef.current.getContext("2d");
      videoRef.current.height = videoRef.current.height
      cxt.fillStyle = "coral";
      cxt.beginPath();
      let x0 = e.clientX - partRef.current.offsetLeft
      let y0 = e.clientY - partRef.current.offsetTop
      cxt.arc(x0, y0, 3, 0, Math.PI*2, true);
      cxt.closePath();
      cxt.fill();
      save({
        type: 2,
        x0: x0 * 8,
        y0: y0 * 10.4,
        facilityId: props.facility.id
      })
    }else if(type === 'line'){
      if(line) {
        save({
          type: 1,
          x0: line.x * 8,
          x1: (e.clientX - partRef.current.offsetLeft) * 8,
          y0: line.y * 10.4,
          y1: (e.clientY - partRef.current.offsetTop) * 10.4,
          facilityId: props.facility.id
        })
        return
      }
      const cxt = videoRef.current.getContext("2d");
      videoRef.current.height = videoRef.current.height
      line = {x: e.clientX - partRef.current.offsetLeft, y: e.clientY - partRef.current.offsetTop}
      cxt.moveTo(line.x, line.y);
      cxt.strokeStyle = "coral";
      cxt.stroke();
    }else if(type === 'circle'){
      if(line) {
        save({
          type: 0,
          x0: line.x * 8,
          x1: (e.clientX - partRef.current.offsetLeft) * 8,
          y0: line.y * 10.4,
          y1: (e.clientY - partRef.current.offsetTop) * 10.4,
          facilityId: props.facility.id
        })
        return
      }
      const cxt = videoRef.current.getContext("2d");
      videoRef.current.height = videoRef.current.height
      line = {x: e.clientX - partRef.current.offsetLeft, y: e.clientY - partRef.current.offsetTop}
      cxt.moveTo(line.x, line.y);
      cxt.strokeStyle = "coral";
      cxt.stroke();
    }
  }

  //持续移动时
  const onmousemove = (event) => {
    var e = event || window.event;
    if(type === 'line' && line){
      const cxt = videoRef.current.getContext("2d");
      videoRef.current.height = videoRef.current.height
      cxt.moveTo(line.x, line.y);
      cxt.lineTo(e.clientX - partRef.current.offsetLeft, e.clientY - partRef.current.offsetTop);
      cxt.strokeStyle = "coral";
      cxt.stroke();
    }else if(type === 'circle' && line){
      const cxt = videoRef.current.getContext("2d");
      videoRef.current.height = videoRef.current.height
      cxt.rect(line.x, line.y, e.clientX - partRef.current.offsetLeft - line.x, e.clientY - partRef.current.offsetTop - line.y);
      cxt.strokeStyle = "coral";
      cxt.stroke();
    }
  }
  

  return <div className='big-video'>
    {
      props.facility.hot ? <LeftList className='big-left' id={props.facility.id} refech={refech}></LeftList> : ''
    }
    <div className='big-right' ref={partRef}>
      {props.facility.hot ? <div className='big-right-video'>
        <VideoPlayer className='big-video' url={ getUrl() }></VideoPlayer>
        { props.facility.hot ? <canvas width={1024} height={768} className='canvas' ref={videoRef} 
          onClick={dotFn} onMouseMove={onmousemove}></canvas> : ''}
      </div> : <VideoPlayer className='big-video' url={ getUrl() }></VideoPlayer>}
      <CloseOutlined className='close' onClick={() => props.dispatch({type: 'setFacility', payload: {facility:null}})} />
      { props.facility.hot ? <div className='measure'>
        <AimOutlined className={`mr-20 ${type === 'dot' ? 'active' : ''}`} onClick={(e) => setTypeFn('dot', e)} />
        <LineOutlined className={`mr-20 ${type === 'line' ? 'active' : ''}`} onClick={(e) => setTypeFn('line', e)} />
        <BorderOutlined className={`mr-20 ${type === 'circle' ? 'active' : ''}`} onClick={(e) => setTypeFn('circle', e)} />
      </div> : ''}
    </div>
  </div>
}

export default BigVideo